[HTML] 버튼 태그 알아보기, button tag

button 태그에 대하여 알아보겠습니다. button 태그는 웹사이트에서 매우 많이 사용되는 엘리먼트 요소 버튼 모양의 레이아웃을 보여주고 특정 기능을 실행하거나 form 태그에 submit하는 등의 용도로 사용됩니다. 그럼 button 태그를 어떻게 사용하는지 아래에서 자세히 알아봅니다.

# HTML button 태그의 사용

먼저 button 태그는 다음과 같은 모습으로 사용됩니다. 그리고 그 아래는 사용 가능한 속성들입니다.

<button>test</button>


! button 태그에 사용 가능한 속성보기
button 태그는 다은과 같은 속성을 사용할 수 있습니다.

i. type
button // 단순 버튼 형태로 클릭시 폼태그를 submit하지 않음
submit // 클릭할 경우 form 태그의 action 속성의 위치로 submit됨
reset // 전송값들을 리셋함(초기화)

위 타입값 중에서 form 태그를 리셋하기 위한 방법으로 reset 값을 설정할 수 있습니다. 예를들면 아래의 코드가 있는 경우...

@ reset.html

만약 위 버튼들 중 reset 버튼을 클릭하면 입력되었던 글들이 모두 사라지고 처음의 상태로 리셋됩니다.

참고로 위의 reset 버튼은 form요소의 reset() 메소드를 사용하는 것과 동일하게 동작합니다.



ii. formtarget
_self // 현재 창
_blank // 새로운 창을 만듦
_parent // 상위 프레임에 나타남

# button 태그 예제보기

아래 예제를 봐주세요.

위 코드를 실행하면 아래와 같이 나타납니다.

test

위에 존재하는 작은 버튼이 바로 button 태그의 기본적인 layout입니다.